import React, { useState, useEffect } from "react";
import { connect } from "react-redux";
import { Toast } from "antd-mobile";
import MainLayout from "@/component/mainLayout/mainLayout";
import Card from "./components/card";
import Example from "./components/example";
import Form from "./components/form";
import yhTools from "@/tools/yh";
import { createForm } from "rc-form";
import { InterfaceG } from "@/config/Config";
import creditStore from "../creditStore";
import "./index.scss";

const channelCode = "05";
const Authentication = props => {
	const { productNum, form } = props;
	const [cardImg, setCardImg] = useState({});
	const [formValues, setFormValues] = useState({});
	const [showExample, setShowExample] = useState(true);
	const { getAppPlatformsDatas, isHiddenBotton } = props;
	const [disabled, setDisabled] = useState(false);
	//查询身份证信息
	const queryIdCardInfo = async () => {
		let objs = {
			url: InterfaceG.queryIdCardInfo,
			params: {
				productNum
			}
		};
		try {
			Toast.loading("加载中...");
			let { data, code } = await yhTools.request(objs);
			if (code === "0" && data) {
				setFormValues(data || {});
				setDisabled(true);
				setShowExample(false);
			}
		} catch (error) {
			Toast.fail(error ? error.message : "");
		}
	};
	useEffect(() => {
		queryIdCardInfo();
	}, []);
	//上传图片
	const updateImage = async (fileType, path, base64) => {
		let jsonDataArr = [
			{
				name: fileType === "4" ? "CardBackImg.jpeg" : "CardImg.jpeg",
				path,
				params: {
					fileType, //2正面，1反面
					productNum,
					channelCode, //渠道编号,
					version: "1.0"
				}
			}
		];
		//上传身份证
		let objs = {
			url: InterfaceG.xhdUploadIdCardOcrForHt,
			imageArray: jsonDataArr
		};

		try {
			Toast.loading("识别中...");
			const { data = {}, code, message } = await yhTools.request(objs);
			if (code == "0") {
				let values = form.getFieldsValue();
				Object.keys(data).forEach(key => {
					if (data[key]) {
						formValues[key] = data[key];
					}
					if (values[key]) {
						data[key] = values[key];
					}
				});
				setFormValues({
					...formValues
				});
				setShowExample(false);
				setCardImg({
					...cardImg,
					[fileType]: base64
				});
			} else {
				Toast.fail(message);
			}
		} catch (error) {
			Toast.fail(error ? error.message : "");
		}
	};
	//打开原生获取图片
	const chooseImage = async type => {
		let imgPicker = {
			type: "3", //相机和相册
			imageName: getAppPlatformsDatas.mobile + "_card_" + type + ".png",
			imageSize: 100 * 1024 + "", // 100kb,自定义
			thumbnailSize: 100 * 1024 + "" // 100kb,自定义
		};
		try {
			const { data } = await yhTools.chooseImage(imgPicker);
			updateImage(type, data.path, data.base64);
		} catch (error) {
			console.log(error);
		}
	};
	//提交
	const submitHandle = async values => {
		if (disabled) {
			return props.goNext();
		}
		props.trim(values);
		let objs = {
			url: InterfaceG.saveConfirmIdCardInfo,
			params: {
				...formValues,
				...values,
				productNum,
				applyNo: getAppPlatformsDatas.applyNo,
				channelCode
			}
		};
		Toast.loading("加载中...");
		try {
			const { code, message } = await yhTools.request(objs);
			if (code == "0") {
				props.goNext();
				Toast.hide();
			} else {
				Toast.info(message, 2);
			}
		} catch (error) {
			Toast.fail(error ? error.message : "");
		}
	};
	const headerParams = {
		header: {
			title: "身份影像"
		},
		isModal: true,
		history: props.history,
		cacheLifecycles: props.cacheLifecycles
	};
	return (
		<MainLayout pageParams={headerParams} handleBack={props.handleBack}>
			<div className="authentication-wrapper">
				<div className="authentication-card">
					<Card
						url={formValues.frontImageUrl}
						cardImg={cardImg}
						disabled={disabled}
						type="2"
						onClick={chooseImage}
					/>
					<Card
						url={formValues.backImageUrl}
						disabled={disabled}
						cardImg={cardImg}
						type="4"
						onClick={chooseImage}
					/>
				</div>
				{showExample ? (
					<Example />
				) : (
					<Form
						{...props}
						values={formValues}
						onClick={submitHandle}
						disabled={disabled}
						isHiddenBotton={isHiddenBotton}
						{...form}
					/>
				)}
			</div>
		</MainLayout>
	);
};
const mapStateToProps = state => state;

export default connect(mapStateToProps)(
	creditStore(createForm()(Authentication))
);
